<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <head th:include="common/common::header">
    </head>
<body>

<div class="x-body">
    <div  class="layui-row">
        <form class="layui-form layui-col-md12 x-so">

            <input class="layui-input" placeholder="开始日期" autocomplete="off" name="startTime" id="start">
            <input class="layui-input" placeholder="截止日期" autocomplete="off" name="endTime" id="end">
            <button id="mybtn" class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>

    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">统计图表</li>
            <li>数据展示</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div id="main"></div>
            </div>
            <div class="layui-tab-item">
                <table id="selectTable" class="layui-table"></table>
            </div>
        </div>
    </div>
</div>

<div style="float: left;width: 1600px;height: 450px;padding: 50px 0 0 50px"> <!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->
    <div id='bbbb' style='width:750px;height:400px;float: left'></div>
    <div id='aaaa' style='width:750px;height:400px;float: left'></div>
</div>

<script>
    var mainContainer = document.getElementById('main'); //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    var resizeMainContainer = function () {
        mainContainer.style.marginLeft = window.innerWidth * 0.11 +'px';
        mainContainer.style.width = window.innerWidth * 0.78 +'px';
        mainContainer.style.height = window.innerHeight * 0.52 +'px';
    }; //设置容器高宽
    resizeMainContainer();

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(mainContainer);

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });

    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(search)', function (data) {
            searchForm(data);
            return false;
        });
    });

    function searchForm(data) {
        $.ajax({
            type: "get",
            url: "/dangxia/statistics/getFlowrate",
            contentType: "application/json",
            data: data.field,
            dataType: "json",
            timeout: 8000,
            async: true,
            cache: true,
            success: function (dataAjax) {
                var dataChart0 = new Array();
                var dataChart1 = new Array();

                for (var i = 0; i < dataAjax.data.length; i++) {
                    dataChart0.push(dataAjax.data[i].time);
                    dataChart1.push(dataAjax.data[i].count);

                }

                // 指定图表的配置项和数据
                var option = {
                    color: ['red', 'black'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    title:{
                        text:'---当前年份学校学生入住情况---'  ,
                        left:'35%',
                        top:'92%'
                    },
                    legend: {
                        top:'2%',
                        data: ['入住人数统计']
                   },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {show: false},
                            data: dataChart0
                        }
                    ],
                    yAxis: [
                        {
                            name :'单位：个',
                            nameLocation:'end',
                            type: 'value'
                        }
                    ],
                    series: [

                        {
                            name: '入住人数',
                            type: 'bar',
                            data: dataChart1
                        }
                    ]
                }

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

                layui.use(['table', 'util'], function () {
                    var table = layui.table;
                    //第一个实例
                    table.render({
                        elem: '#selectTable'
                        , data: dataAjax.data //数据接口
                        , page: true //开启分页,
                        , skin: 'row'
                        ,toolbar: '#toolbarDemo'
                        /*------thymeleaf有自带的[[ 使用layui的需要隔开 ---------*/
                        , cols: [
                            [
                                //表头
                                {field: 'time', title: '入住时间', width: 200, sort: true, fixed: 'left'}
                                , {field: 'count', title: '入住人数',width:200}

                            ]
                        ]
                    });
                });
            }
        });
    }

    <!-- 页面加载动点击按钮发送请求显示统计图-->
    window.onload=function (ev) {
        $("#mybtn").click();
    }
</script>


</body>
</html>